<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        ul{
            margin: 30px 30px;
            text-align: center;
        }
        li{
            display: inline-block;
            padding: 40px;
            background-color: red;
        }
        .method2{
            font-size: 0;
            /*兼容safari：添加word-spacing,添加letter-spacing*/
            /*不同字号像素值要做一定的调整*/
            word-spacing: -4px;
            letter-spacing: -4px;
        }
        .method2 li{font-size: 16px;}
        span{
            background: #fac8b4;
        }
    </style>
</head>
<body>
<span>1</span>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<!--方法2，设置父元素字体为0，然后子元素重新设置字体,在Safari下问题依然存在-->
<!--在这基础之上解决safari问题-->
<ul class="method2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<!--方法3，丢失结束标签-->
<ul>
    <li>1
    <li>2
    <li>3
    <li>4
    <li>5
</ul>
<!--改变html的结构，只适用于静态页面，当为后台生成时，不能使用-->
<!--方法1-->
<ul>
    <li>
    1</li><li>
    2</li><li>
    3</li><li>
    4</li><li>
    5</li>
</ul>
<ul>
    <li>1</li
    ><li>2</li
    ><li>3</li
    ><li>4</li
    ><li>5</li>
</ul>
<ul>
    <li>1</li><!--
    --><li>2</li><!--
    --><li>3</li><!--
    --><li>4</li><!--
    --><li>5</li>
</ul>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>